/*--reset--*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*--start editing from here--*/
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/*--end reset--*/
body {
    font-family: Verdana;
    background: url("../img/index.jpg") no-repeat;
    background-position-x: center;

}

h1 {
    font-size: 3em;
    text-align: center;
    color: #fff;
    font-weight: 100;
    letter-spacing: 2px;

}

/*-- main --*/
.main-agile {
    padding: 2em 0 0;
}

/*-- Styling the forms --*/
#w3ls_form {
    z-index: 1;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
}

.signin-form {
    width: 30%;
    height: 590px;
    margin: 2em auto;
    position: relative;
}

#w3ls_form form {
    width: 375px;
    height: 485px;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2em;
    -webkit-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.5);
    -moz-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.5);
    -o-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.5);
    -ms-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.5);
    box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.5);
    margin: 0 auto;
}

#signin {
    z-index: 100;
}

#signup {
    z-index: 1;
    opacity: 0;
    /* Rotating the sign up password form by default */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#w3ls_form.flipped #signin {
    opacity: 0;
    /**
     * Rotating the sign in form when the
     * flipped class is added to the container
     */
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

#w3ls_form.flipped #signup {

    opacity: 1;
    /* Rotating the sign up div into view */
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/*-- //Styling the forms --*/
/*-- sign in-form --*/
.signin-form h2, .signin-form h3 {
    font-size: 2em;
    color: #fff;
    text-align: center;
    margin: 0 0 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-bottom: 15px;
}
input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    transition: background-color 9999s ease-out 0.1s;

}

.signin-form input[type="text"], .signin-form input[type="password"] {
    outline: none;
    font-size: 1em;
    color: #e8e8e8;
    padding: .8em 1em;
    margin: 0;
    width: 93.6%;
    border: none;
    -webkit-appearance: none;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
'Athiti', sans-serif;
}

.signin-form p {
    font-size: 1em;
    color: #fff;
    margin: 1em 0 .5em;
}

/*-- checkbox --*/
.signin-form input[type="checkbox"] {
    display: none;
}

.signin-form input[type="checkbox"] + label {
    position: relative;
    padding-left: 1.8em;
    border: none;
    outline: none;
    font-size: 1em;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 1.5em 0;
}

.signin-form input[type="checkbox"] + label span:first-child {
    width: 14px;
    height: 14px;
    border: 2px solid #C8C8C8;
    position: absolute;
    left: 0;
    top: 3px;
}

.signin-form input[type="checkbox"]:checked + label span:first-child:before {
    content: "";
    /* background: url("../img/tick.png")no-repeat; */
    background-image: url("../img/tick.png");
    background-repeat: no-repeat;
    position: absolute;
    left: 2px;
    top: 2px;
    font-size: 10px;
    width: 10px;
    height: 10px;
}

/*-- //checkbox --*/
.signin-form input[type="submit"] {
    font-size: 1em;
    color: #fff;
    background: #003b64;
    border: none;
    outline: none;
    cursor: pointer;
    padding: .6em 1em;
    -webkit-appearance: none;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.signin-form input[type="submit"]:hover {
    background: rgba(223, 238, 14, 0.678);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

/*-- //sign in-form --*/
/*-- Buttons & Links --*/
#signin .flipLink,
#signup .flipLink {
    display: block;
}

#eyes {
    width: 30px;
    height: 25px;
    position: absolute;
    right: 38px;
    margin-top: -33px;
    cursor: pointer;
}

#eyess {
    width: 30px;
    height: 25px;
    position: absolute;
    right: 38px;
    margin-top: -33px;
    cursor: pointer;
}

#eyesss {
    width: 30px;
    height: 25px;
    position: absolute;
    right: 38px;
    margin-top: -33px;
    cursor: pointer;
}

.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

.ribbon a {
    font-size: 13px;
    color: #FFF;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100px;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -o-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -ms-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px;
}

.ribbon a::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid rgba(0, 0, 0, 0.5);
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid rgba(0, 0, 0, 0.5);
}

.ribbon a::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid transparent;
    border-top: 3px solid rgba(0, 0, 0, 0.5);
}

#signup .ribbon {
    right: inherit;
    left: -5px;
}

#signup .ribbon a {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: inherit;
    left: -21px;
}

/*-- //Buttons & Links --*/
/*-- sign in-bottom --*/
.signin-agileits-bottom p {
    text-align: center;
    margin: 1.5em 0;
}

.signin-agileits-bottom p a {
    color: #fff;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.signin-agileits-bottom p a:hover {
    color: #e89406;
}

.social-icons ul li {
    background-color: #3b5998;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    transition: .5s all;
    display: inline-block;
    width: 48%;
    float: left;
}

.social-icons ul li a {
    display: block;
}

.social-icons ul li a span {
    vertical-align: middle;
    color: #fff;
    float: left;
    font-size: .9em;
}

.social-icons ul li a span.text {
    padding: .6em 0;
    text-align: center;
    width: 78%;
}

.social-icons ul li span.icons {
    background: url("../images/i1.png") no-repeat #2E4A84 center;
    width: 40px;
    height: 40px;
    display: inline-block;
    border-right: 1px solid #3b5998;
}

.social-icons ul li.twt {
    background-color: #55acee;
    float: right;
}

.social-icons ul li.twt span.icons {
    background: url("../images/i2.png") no-repeat #4D9CD8 center;
    border-color: #67b0e8;
}

.social-icons ul li:hover {
    background: #2E4A84;
}

.social-icons ul li.twt:hover {
    background: #4D9CD8;
}

/*-- //sign in-bottom --*/
/*-- copyright --*/
.copyright {
    text-align: center;
    margin: 2em 0 0;
}

.copyright p {
    font-size: 1em;
    color: #fff;
    line-height: 1.8em;
}

.copyright p a {
    color: #ffa308;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.copyright p a:hover {
    color: #fff;
}

/*-- //copyright --*/
/*-- responsive-design --*/
@media (max-width: 1440px) {
    .signin-form {
        width: 33%;
        height: 605px;
    }

    .copyright {
        margin: 2em 0;
    }
}

@media (max-width: 1366px) {
    .signin-form {
        width: 36%;
        height: 605px;
    }
}

@media (max-width: 1080px) {
    .signin-form {
        width: 44%;
    }
}

@media (max-width: 1024px) {
    .signin-form {
        width: 47%;
    }
}

@media (max-width: 800px) {
    h1 {
        font-size: 2.5em;
    }

    .main-agile {
        padding: 1em 0 0;
    }

    .signin-form {
        width: 60%;
        margin: 1em auto;
    }
}

@media (max-width: 736px) {
    .signin-form {
        width: 67%;
        height: 570px;
    }

    #w3ls_form form {
        padding: 1.5em 2em;
        height: 88%;
    }

    .signin-form input[type="text"], .signin-form input[type="password"] {
        padding: .6em 1em;
    }
}

@media (max-width: 667px) {
    .signin-form {
        width: 71%;
        height: 560px;
    }

    .social-icons ul li span.icons {
        height: 41px;
    }
}

@media (max-width: 640px) {
    .signin-form {
        width: 72%;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 2.2em;
    }

    .signin-form {
        width: 80%;
    }
}

@media (max-width: 568px) {
    #w3ls_form form {
        padding: 1.5em;
        width: 88%;
    }

    .signin-form {
        width: 84%;
        height: 540px;
    }

    .signin-form h2, .signin-form h3 {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .signin-form input[type="text"], .signin-form input[type="password"] {
        padding: .4em 1em;
        width: 90.5%;
        font-size: 0.9em;
    }

    .social-icons ul li {
        width: 65%;
        float: none;
        margin: 0 auto;
        text-align: center;
    }

    .social-icons ul li.twt {
        float: none;
    }

    .social-icons {
        text-align: center;
    }

    #w3ls_form form {
        padding: 1em 1.5em;
        height: 92%;
    }

    .signin-form h2, .signin-form h3 {
        font-size: 1.8em;
    }

    .signin-form p {
        font-size: 0.9em;
    }

    .signin-form input[type="checkbox"] + label {
        font-size: 0.9em;
    }

    .signin-form input[type="submit"] {
        font-size: 0.9em;
    }

    .signin-agileits-bottom p {
        margin: 1em 0;
    }

    .signin-form {
        height: 508px;
    }

    .copyright p {
        font-size: 0.9em;
        padding: 0 1em;
    }
}

@media (max-width: 414px) {
    h1 {
        font-size: 1.8em;
    }

    .signin-form h2, .signin-form h3 {
        font-size: 1.6em;
    }

    #w3ls_form form {
        width: 83%;
    }

    .social-icons ul li {
        width: 80%;
    }

    .social-icons ul li span.icons {
        height: 35px;
    }

    .social-icons ul li a span.text {
        padding: .4em 0;
    }

    .signin-form {
        height: 485px;
    }
}

@media (max-width: 320px) {
    h1 {
        font-size: 1.6em;
    }

    .signin-form h2, .signin-form h3 {
        font-size: 1.4em;
    }

    #w3ls_form form {
        width: 79%;
        padding: 0.7em 1.5em;
        height: 93%;
    }

    .signin-form {
        width: 90%;
        height: 470px;
    }

    .signin-form input[type="text"], .signin-form input[type="password"] {
        font-size: 0.85em;
        width: 86.5%;
    }

    .signin-form input[type="submit"] {
        padding: .4em 1em;
    }

    .social-icons ul li {
        width: 97%;
    }

    .copyright {
        margin: 0 0 2em;
    }
}

/*-- //responsive-design --*/